<template>
    <div class="RightTab">
        <el-tabs v-model="activeName" class="flex-tabs">
            <el-tab-pane label="服务工单">
                <div class="btn-wrap btn">
                    <el-button @click="newTirggerFun"><i class="el-icon-circle-plus"></i>新增</el-button>
                    <el-button><i class="el-icon-delete"></i>删除
                    </el-button>
                    <el-button>
                        <i class="iconfont icon-group10copy"></i> 列设置
                    </el-button>
                </div>
                <div class="Table">
                    <el-table :data="tableData.columnData" style="width: 95%;margin:0 auto;height:605px">
                        <el-table-column prop="date" label="标题" min-width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="优先级" min-width="100">
                        </el-table-column>
                        <el-table-column prop="address" label="描述" min-width="100">
                        </el-table-column>
                        <el-table-column prop="address" label="状态" min-width="100">
                        </el-table-column>
                        <el-table-column prop="address" label="最后修改时间" min-width="100">
                        </el-table-column>
                    </el-table>
                </div>
                <section class="pagination page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                        layout="sizes,total,prev,pager,next" :current-change.sync="tableData.currentPage"
                        :current-page.sync="tableData.currentPage" :total="tableData.total">
                    </el-pagination>
                </section>
            </el-tab-pane>
            <new-Trigger ref="tmp"></new-Trigger>
        </el-tabs>
    </div>
</template>

<script>
    import newTrigger from './newTrigger'
    export default {
        components: {
            newTrigger
        },
        data() {
            return {
                activeName: '0',
                tableData: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    columnData: []
                }
            };
        },
        methods: {
            newTirggerFun() { // 新增按钮
                // console.log(this.$refs.tmp, 'this.$refs.tmp')
                this.$refs.tmp.showLayout();
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
            }
        },
        created() {

        }
    }

</script>

<style lang="scss" scoped>
    .RightTab {
        flex: 1;
        height: 100%;

        .flex-tabs {
            /deep/ .btn {
                float: right;
                margin-right: 10px;
                margin-bottom: 10px;
            }

            .page {
                padding: 10px 20px;
            }
        }
    }

</style>
